<template>
  <view class="record-item" @tap="recordItemTapFn">
    <view
      class="order-header"
      :class="{
        wait: [0, 10, 100].includes(record.status),
        runing: [200, 300, 400].includes(record.status),
        done: [1000, -100].includes(record.status),
      }"
    >
      <view class="order-code">
        <view class="order-code-item">
          自有订单号
          <text class="order-code-text" @longpress.stop="copyText(record.orderNo)" @click.stop="click(record)" @touchend="touchend">{{
            record.orderNo
          }}</text>
        </view>
      </view>
      <view class="order-status">{{ record.statusName }}</view>
    </view>
    <view class="order-main">
      <!-- 车辆信息 -->
      <view class="order-license">
        <view
          class="license-number"
          v-if="record.licenseNo"
          @longpress.stop="copyText(record.licenseNo)"
          @click.stop="click(record)"
          @touchend="touchend"
          >{{ record.licenseNo }}</view
        >
        <view class="car-model overflow-ellipsis">{{ record.modelName || '暂无车型' }}</view>
      </view>
      <view class="divider"></view>
      <!-- 订单标签 -->
      <view class="order-tag-list">
        <view class="order-tag-item" v-for="(item, index) in record.orderLabelList" :key="index">
          {{ item }}
        </view>
      </view>
      <!-- 取还车信息 -->
      <view class="order-car-info-block">
        <order-item-site :canEditStaff="orderStaffCanClick('staff')" :record="record" type="site" @edit="editStaffFn('giveStaff')" />
        <order-item-site
          :canEditStaff="orderStaffCanClick('returnStaff')"
          style="margin-top: 24rpx"
          :record="record"
          type="returnSite"
          @edit="editStaffFn('returnStaff')"
        />
      </view>
      <!-- 租赁周期 -->
      <view class="order-lease">
        <view class="order-lease-item">
          <view class="order-lease-item-tag">预取</view>
          <view class="order-lease-item-time">{{ record.expectedUseCarTime }}</view>
        </view>
        <view class="order-lease-item">
          <view class="order-lease-item-tag">预还</view>
          <view class="order-lease-item-time">{{ record.expectedReturnCarTime }}</view>
        </view>
      </view>
      <view class="divider"></view>
      <order-item-cell label="承租人">
        <view class="member-info">
          <view class="member-name">{{ record.memberName }}</view>
          <!-- 电话拨打 -->
          <view class="member-phone" @click.stop="dialPhone(record.memberPhone)" v-if="record.memberPhone">
            {{ record.memberPhone }}<view class="member-phone-icon"> <ve-icon name="tel_1" color="#3072f6" size="28" /></view>
          </view>
        </view>
      </order-item-cell>
      <!-- 修改会员信息 -->
      <view v-if="canEditMemberInfo" style="display: flex; justify-content: right; margin: -16rpx 0 16rpx">
        <ve-button type="plain" @click.stop="editMemberFn" size="tiny" style="margin-right: 12rpx">
          <template #icon>
            <ve-icon name="change" size="28" />
          </template>
          修改承租人信息
        </ve-button>
        <!-- 个人会员 -->
        <ve-button v-if="record.memberType == 2" type="plain" @click.stop="editCurrentMemberFn" size="tiny">
          <template #icon>
            <ve-icon name="edit" size="28" />
          </template>
          修改已选承租人信息
        </ve-button>
      </view>
      <view class="divider"></view>
      <order-item-cell label="备注">
        <!-- <ve-text :text="record.remark"></ve-text> -->
        <view class="remark-content">
          <text class="remark-info">{{ record.remark || '-' }}</text>
          <text v-if="record.remark" class="remark-btn" @click.stop="showRemarkModal(record.id)">更多</text>
        </view>
      </order-item-cell>
      <view style="height: 1rpx"></view>
    </view>
    <order-item-operates :record="record" :admin="employeeId" :isAdminRole="isAdminRole" @ok="emits('ok')" />

    <!-- 修改承租人信息 -->
    <editLesseeMemberModal ref="editLesseeMemberModalRef" @ok="editLesseeSuccessFn" />
    <!-- 修改已选承租人信息 -->
    <EditCurrentMemberModal orderType="lOrder" ref="editCurrentMemberModalRef" @ok="editLesseeSuccessFn" />
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import orderItemSite from '@/pages/order/components/orderItemSite.vue'
  import orderItemCell from '@/pages/order/components/orderItemCell.vue'
  import orderItemOperates from './orderItemOperates.vue'
  import editLesseeMemberModal from './modals/edit-lessee-member-modal.vue'
  import EditCurrentMemberModal from '@/pages/order/components/customer/edit-current-member-modal.vue'
  import { getOrdrDetailsAPI } from '@/api/order/lOrder'
  import { usePermission } from '@/hooks/usePermission'
  import { dialPhone } from '@/utils'
  const islongPress = ref(false)
  // 复制
  const copyText = (e) => {
    islongPress.value = true
    uni.setClipboardData({
      data: e,
      success: function () {
        uni.showToast({
          title: '已复制',
          icon: none,
        })
      },
    })
  }
  const click = (i) => {
    if (islongPress.value == false) {
      // console.log("不是长按事件");
      recordItemTapFn()
    } else if (islongPress.value == true) {
      // console.log("长按事件");
    }
  }
  const touchend = () => {
    //延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
    setTimeout(() => {
      islongPress.value = false
    }, 200)
  }
  const props = defineProps({
    record: {
      type: Object,
      default: () => {},
    },
    employeeId: {
      type: String,
      default: '',
    },
    isAdminRole: {
      type: Boolean,
      default: false,
    },
  })
  const emits = defineEmits(['editStaffFn', 'editLesseeSuccessFn'])
  // 操作的是交车 or 还车人
  const editStaffFn = (type) => {
    emits('editStaffFn', type, props.record)
  }
  // 待排车、待用车时，可变更交车人
  // 待排车、待用车、用车中时，可变更还车人
  const orderStaffCanClick = (type) => {
    const {
      isCarHouseKeepOpen,
      assignGiveCarStaffFlag,
      assignReturnCarStaffFlag,
      giveStaffStatus,
      returnStaffStatus,
      status,
      inProgressGiveWorkOrderFlag, // 交车工单是否进行中 1-进行中 0-未进行中
      inProgressReturnWorkOrderFlag, // 还车工单是否进行中 1-进行中 0-未进行中
    } = props.record

    // 开启车管家
    if (isCarHouseKeepOpen === 1) {
      // 修改交车人
      if (type == 'staff' && assignGiveCarStaffFlag == 1) {
        if (giveStaffStatus === 3 || giveStaffStatus === null) {
          return [10, 100].includes(status) && usePermission('svmsapp:order:long-order.edit')
        }
      }

      // 修改还车人
      if (type == 'returnStaff' && assignReturnCarStaffFlag === 1) {
        if (returnStaffStatus === 3 || returnStaffStatus === null) {
          return [10, 100, 200].includes(status) && usePermission('svmsapp:order:long-order.edit')
        }
      }

      return false
    } else {
      if (type == 'staff') {
        return (
          [10, 100].includes(status) &&
          usePermission('svmsapp:order:long-order.edit') &&
          assignGiveCarStaffFlag === 1 &&
          inProgressGiveWorkOrderFlag === 0
        )
      }
      if (type == 'returnStaff') {
        return (
          [10, 100, 200].includes(status) &&
          usePermission('svmsapp:order:long-order.edit') &&
          assignReturnCarStaffFlag === 1 &&
          inProgressReturnWorkOrderFlag === 0
        )
      }
    }
  }

  // 是否可以修改承租人
  const canEditMemberInfo = computed(() => {
    return usePermission('svmsapp:order:long-order.edit') && [10, 100, 200, 300, 1000].includes(props.record.status)
  })

  // 修改承租人
  const editLesseeMemberModalRef = ref()
  const editMemberFn = () => {
    editLesseeMemberModalRef.value.open(props.record.id)
  }

  // 修改已选承租人信息
  const editCurrentMemberModalRef = ref()
  const editCurrentMemberFn = () => {
    const { record } = props
    if (!record.memberPhone || !record.memberName) {
      uni.showToast({ title: '请先填写承租人及联系电话', icon: 'none' })
      return
    }
    if (record.memberPhone.indexOf('*') != -1) {
      uni.showToast({ title: '手机号码带*无法在系统中找到该会员，请先填写正确的手机号码，再修改信息', icon: 'none' })
      return
    }
    editCurrentMemberModalRef.value.open(props.record)
  }

  // 修改承租人成功
  const editLesseeSuccessFn = () => {
    let orderId = props.record.id
    getOrdrDetailsAPI({ id: orderId }).then((res) => {
      let result = res.result
      let memberInfoDto = result.memberInfoDto
      let orderInfo = result.orderInfo
      let temp = {
        ...props.record,
        // 个人用户
        memberPhone: orderInfo.memberPhone,
        memberName: orderInfo.memberName,
        // 企业用户
        clientId: orderInfo.clientId,
        clientName: orderInfo.clientName,
        memberId: orderInfo.memberId,
        // 通用
        cardType: memberInfoDto.cardType,
        cardNumber: memberInfoDto.cardNumber,
        // 驾驶证正反面信息
        driverFrontFileId: memberInfoDto.driverFrontFileId,
        driverReverseFileId: memberInfoDto.driverReverseFileId,
        // 身份证明正反面信息
        idCardFrontFileId: memberInfoDto.idCardFrontFileId,
        idCardReverseFileId: memberInfoDto.idCardReverseFileId,
      }
      emits('editLesseeSuccessFn', temp)
    })
  }
  // 点击卡片
  const recordItemTapFn = () => {
    const record = props.record
    if (usePermission('svmsapp:order:long-order.view')) {
      uni.navigateTo({
        url: `/pages/order/long-order/detail/index?id=${record.id}&orderNo=${record.orderNo}&orderId=${record.id}&bizType=2`,
      })
    }
  }
  // 跳转更多备注页面
  const showRemarkModal = (id) => {
    uni.navigateTo({
      url: '/pages/order/long-order/remark-list?id=' + id,
    })
  }
</script>

<style lang="less" scoped>
  .overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .record-item {
    margin-bottom: 24rpx;
    border-radius: 8rpx;
    .order-header {
      display: flex;
      align-items: center;
      padding: 24rpx 22rpx 24rpx 24rpx;
      height: 72rpx;
      border-radius: 8rpx 8rpx 0 0;
      .order-channel-name {
        width: 64rpx;
        height: 64rpx;
        text-align: center;
        line-height: 64rpx;
        background-color: #3072f6;
        font-size: 24rpx;
        margin-right: 20rpx;
        border-radius: 4rpx;
        color: #ffffff;
      }
      .order-code {
        flex: 1;
        .order-code-item {
          font-size: 24rpx;
          color: #8491a8;
          line-height: 1;
          .order-code-text {
            color: #191c27;
            margin-left: 8rpx;
          }
        }
      }
      .order-code-item + .order-code-item {
        margin-top: 16rpx;
      }
      .order-status {
        width: 100rpx; //ios
        font-size: 28rpx;
      }

      &.wait {
        background: linear-gradient(90deg, #fff3d5 0%, #ffffff 100%);
        color: #e59b1c;
      }

      &.runing {
        background: linear-gradient(90deg, #d5e5ff 0%, #ffffff 100%);
        color: #3072f6;
      }

      &.done {
        background: linear-gradient(90deg, #eaecef 0%, #ffffff 100%);
        color: #8491a8;
      }
    }
    .order-main {
      padding: 0 24rpx;
      background: #ffffff;
      .order-license {
        display: flex;
        align-items: center;
        padding: 12rpx 0 10rpx;
        line-height: 44rpx;
        .license-number {
          height: 44rpx;
          padding: 0 8rpx;
          background: #3072f6;
          border-radius: 4rpx;
          margin-right: 16rpx;
          color: #ffffff;
          font-size: 22rpx;
          font-weight: 600;
        }
        .car-model {
          flex: 1;
          height: 44rpx;
          font-size: 24rpx;
          font-weight: 600;
          color: #191c27;
        }
      }
      .divider {
        width: 100%;
        height: 2rpx;
        background: #f4f4f4;
      }
      .order-tag-list {
        padding: 14rpx 0;
        .order-tag-item {
          height: 32rpx;
          line-height: 32rpx;
          box-sizing: content-box;
          display: inline-block;
          font-size: 24rpx;
          padding: 0rpx 12rpx;
          border-radius: 18rpx;
          border: 2rpx solid #f5d6a2;
          color: #e59b1c;
          margin-right: 20rpx;
        }
      }
      .order-car-info-block {
        width: 100%;
        background: #f6f7fb;
        border-radius: 4rpx;
        padding: 24rpx;
      }
      .order-lease {
        display: flex;
        margin: 24rpx 0;
        .order-lease-item {
          width: 50%;
          display: flex;
          align-items: center;
          .order-lease-item-tag {
            flex-shrink: 0;
            width: 62rpx;
            height: 38rpx;
            line-height: 38rpx;
            text-align: center;
            border-radius: 20rpx;
            border: 1rpx solid #ff7d00;
            font-size: 22rpx;
            color: #ff7d00;
          }
          .order-lease-item-time {
            flex-shrink: 0;
            font-size: 24rpx;
            color: #191c27;
            margin-left: 4rpx;
          }
        }
      }

      .member-info {
        display: flex;
        align-items: center;
        .member-name {
          max-width: 180rpx;
          margin-right: 24rpx;
          line-height: 28rpx;
          word-wrap: break-word;
        }
        .member-phone {
          display: inline-flex;
          align-items: center;
        }
        .member-phone-icon {
          margin-left: 16rpx;
          margin-right: 32rpx;
          vertical-align: middle;
          display: flex;
        }
        .edit-member-btn {
          font-size: 24rpx;
          color: #3072f6;
          flex-shrink: 0;
        }
      }
    }
    .remark-content {
      display: flex;
      .remark-info {
        font-size: 24rpx;
        display: -webkit-box;
        width: 100%;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
    .remark-btn {
      color: #1890ff;
      cursor: pointer;
      margin: 0 20rpx;
      flex-shrink: 0;
    }
  }
</style>
